<template>
	<view class="my-info-page">
		<view v-if="fla" class="info-area">
			<view class="area-sty">
				<view>姓名：{{studentData.stdNm}}</view>
				<view>年龄：{{studentData.age}}</view>
				<view>性别：{{studentData.gender == 0?'女':'男'}}</view>
				<view>身高：{{studentData.height||''}}</view>
				<view>体重：{{studentData.weight||''}}</view>
			</view>
			<view class="area-sty" style="text-align: right;">
				<img style="width: 158px;height: 188px;" :src="studentData.headImg" alt="">
			</view>
		</view>
		<view v-if="!fla" class="info-area">
			<view class="area-sty">
				<view>课程名称：{{crObj.title}}</view>
				<view>所在班级：{{crObj.classNum}}</view>
				<view>总课时：{{crObj.allClassTime}}</view>
				<view>签到课时：{{crObj.classTime}}</view>
				<view>剩余课时：{{crObj.allClassTime*1-crObj.classTime*1}}</view>
			</view>
		</view>
		<view class="info-area-b">
			<view @click="pageFla" :class="fla ? 'isTab':''">学员各项指标</view>
			<view @click="pageFla" :class="!fla ? 'isTab':''">签到详情</view>
		</view>
		<view>
			<view v-show="fla" class="echarts-wrap">
				<view class="container">
					<uni-ec-canvas :ec="ec" ref="canvas" canvas-id="multi-charts-pie"></uni-ec-canvas>
				</view>
			</view>
			<view v-show="!fla">
				<view v-for="item in signInList" :key="item._id" style="padding: 20px;">
					<view><img style="width: 100%;" :src="item.imgUrl" alt=""></view>
					<view style="margin-top: 20px;font-weight: 600;">签到时间：<uni-dateformat :threshold="[0, 0]"
							:date="item.created_date"></uni-dateformat></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
	import * as echarts from '@/components/uni-ec-canvas/echarts.min'
	const db = uniCloud.database()
	let chart = null
	export default {
		components: {
			uniEcCanvas,
		},
		data() {
			return {
				studentData: {},
				crObj: {},
				fla: true,
				beforData: [],
				afterData: [],
				ec: {
					option: {}
				},
				signInList: []
			}
		},
		onLoad(e) {
			this.getStudentData(e)
			this.getSignInList(e)
		},
		// watch: {
		// "crObj.classNum": {
		// 	handler (nv, ov) {
		// 		console.log(ov,nv)
		// 	},
		// 	deep: true
		// }
		// },
		methods: {
			getStudentData(e) {
				const _this = this
				const item = JSON.parse(e.parm)
				const where = `"learnerId"=="${item.learnerId}"`
				return db.collection('student-MGMT').where(where)
					.field( // heightN,weightN,speed,speed暂不需要
						'properties,portrait,stdNm,age,gender,height,weight,endurance,explosiveness,bounce,shooting,dribbling,enduranceN,explosivenessN,bounceN,shootingN,dribblingN'
					)
					.get().then((res) => {
						const data = res.result.data[0]
						if (data) {
							const file = data.portrait.split(',')
							this.studentData = data
							this.studentData.learnerId = item.learnerId
							this.studentData.headImg = `${this.$baseImgUrl}${file[0]}`
							// endurance耐力 explosiveness爆发力 bounce弹跳力 shooting投篮 dribbling控球
							this.beforData = [data.endurance, data.explosiveness, data.bounce, data.shooting, data
								.dribbling
							]
							this.afterData = [data.enduranceN, data.explosivenessN, data.bounceN, data.shootingN,
								data.dribblingN
							]
							setTimeout(() => {
								this.$refs.canvas.setOption(this.getOption(this.beforData, this.afterData),
									true);
							}, 888)
						}
						console.log(res)
					}).catch((err) => {
						uni.showModal({
							content: err.message || '请求服务失败',
							showCancel: false
						})
					})
			},
			getSignInList(e) {
				const _this = this
				const item = JSON.parse(e.parm)
				const where = `"studentCareId"=="${item.learnerId}"`
				return db.collection('signIn-MGMT').where(where)
					.field( // classTitle
						'classNum,annexId,created_date'
					)
					.get().then((res) => {
						const data = res.result.data
						if (data.length > 0) {
							this.crObj = item
							this.crObj.classTime = this.crObj.classTime ? this.crObj.classTime * 1 : 0
							this.crObj.classNum = data[0].classNum
							data.map(item => {
								const file = item.annexId.split(',')
								item.imgUrl = `${this.$baseImgUrl}${file[0]}`
							})
							this.signInList = data
						}
						console.log(res)
					}).catch((err) => {
						uni.showModal({
							content: err.message || '请求服务失败',
							showCancel: false
						})
					})

			},
			pageFla() {
				if (this.signInList.length > 0) {
					this.fla = !this.fla
				} else {
					uni.showModal({
						content: '暂无签到数据',
						showCancel: false
					})
				}
			},
			getOption(bArr, aArr) {
				const op = {
					color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4',
						'#ea7ccc'
					],
					title: {
						text: '' // 学员各项指数
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						left: 'center',
						textStyle: {
							fontSize: 20
						},
						data: [
							'训练前',
							'训练后'
						]
					},
					radar: [{
						indicator: [{
								text: '耐力',
								max: 100
							},
							{
								text: '爆发力',
								max: 100
							},
							{
								text: '弹跳',
								max: 100
							},
							{
								text: '投篮',
								max: 100
							},
							{
								text: '控球',
								max: 100
							}
						],
						radius: 150, // 设置半径调整图形的大小
						center: ['50%', '60%']
					}],
					series: [{
						type: 'radar',
						radarIndex: 0,
						areaStyle: {},
						data: [{
								value: bArr, // bArr,
								name: '训练前'
							},
							{
								value: aArr, // aArr,
								name: '训练后'
							}
						]
					}]
				}
				return op
			}
		}
	}
</script>

<style lang="less" scoped>
	.my-info-page {}

	.info-area,
	.info-area-b {
		display: flex;
	}

	.info-area view {
		flex: 1;
		font-size: 32rpx;
		font-weight: 500;
		padding: 8px;
	}

	.info-area-b view {
		flex: 1;
		text-align: center;
		line-height: 50px;
		font-size: 36rpx;
		font-weight: 600;
	}

	.isTab {
		color: #fc993b;
	}

	.echarts-wrap {
		// transform: scale(0.76);
	}

	.container {
		margin-top: 20px;
		width: 750rpx;
		height: 750rpx;
	}
</style>